{% extends 'accounts/base.html' %}

{% block title %}系统仪表板{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">系统仪表板</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-download"></i> 导出报告
            </button>
        </div>
    </div>
</div>

<div class="row">
    <!-- 统计卡片 -->
    <div class="col-md-3">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            用户总数
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ user_count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-users fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            角色总数
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ role_count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user-tag fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            权限总数
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ permission_count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-key fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            菜单总数
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ menu_count }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-bars fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- 用户信息 -->
    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-user-circle me-2"></i>我的信息
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width: 30%">用户名:</td>
                                    <td>{{ user.username }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">昵称:</td>
                                    <td>{{ user.nickname|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">邮箱:</td>
                                    <td>{{ user.email|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">电话:</td>
                                    <td>{{ user.phone|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">角色:</td>
                                    <td>
                                        {% for role in user_roles %}
                                            <span class="badge bg-primary me-1">{{ role.name }}</span>
                                        {% empty %}
                                            <span class="badge bg-light text-dark">未分配角色</span>
                                        {% endfor %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">权限数:</td>
                                    <td>{{ user_permissions_count }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最近用户 -->
    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-user-plus me-2"></i>最新用户
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>昵称</th>
                                <th>注册时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for recent_user in recent_users %}
                            <tr>
                                <td>{{ recent_user.username }}</td>
                                <td>{{ recent_user.nickname|default:"-" }}</td>
                                <td>{{ recent_user.date_joined|date:"Y-m-d" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">暂无用户数据</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-info-circle me-2"></i>系统概览
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>功能模块</h5>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                用户管理
                                <span class="badge bg-primary rounded-pill">{{ user_count }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                角色管理
                                <span class="badge bg-success rounded-pill">{{ role_count }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                权限管理
                                <span class="badge bg-info rounded-pill">{{ permission_count }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                菜单管理
                                <span class="badge bg-warning rounded-pill">{{ menu_count }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                工具管理
                                <span class="badge bg-secondary rounded-pill">-</span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>使用说明</h5>
                        <div class="alert alert-info">
                            <h6><i class="fas fa-lightbulb me-2"></i>提示</h6>
                            <ul>
                                <li>通过左侧导航栏访问各个功能模块</li>
                                <li>根据您的角色权限，您只能访问被授权的功能</li>
                                <li>如有问题请联系系统管理员</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}